* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Helvetica, "PingFang SC", "Microsoft Yahei", sans-serif;
}
a {
  outline: none;
}
.navigation ul .one::after {
  content: "";
  display: none;
  background-color: #0fbcf9;
  width: 100px;
  height: 5px;
  border-radius: 4px;
  position: absolute;
  top: 42px;
  left: 10px;
  z-index: 1;
  transition: all ease, 0.3s;
}
.navigation ul .two::after {
  content: "";
  display: block;
  background-color: #0fbcf9;
  width: 100px;
  height: 5px;
  border-radius: 4px;
  position: absolute;
  top: 42px;
  left: 10px;
  z-index: 1;
  transition: all ease, 0.3s;
}

.statistic {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-items: center;
  width: 95%;
  /* height: 100px; */
  z-index: 800;
  border: 1px white solid;
  margin: 0.75rem;
  height: 300px;
  background-color: #f8f8ff;
  padding-top: 30px;
  font-size: xx-large;
  border: #d3d3d3 solid 1px;
  border-radius: 4px;
  text-align: center;
}
.statistic h5 {
  flex: 1;
  position: relative;
  color: #2e2e2e;
  top: -20px;
  left: 0px;
  font-size: 26px;
  font-weight: 700;
  text-align: center;
  vertical-align: middle;
}
.statistic .container {
  flex: 3;
  position: relative;
  top: -10px;
}
/* .statistic .container {
  flex: 3;
  vertical-align: middle;
  margin: 10px auto;
} */
.context {
  height: 1100px;
  width: 100vw;
}
.left-context {
  flex: 1;
  background-color: #f1f1f1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 20px;
  margin-right: 10px;
}
.skills {
  height: 1100px;
}
.right-context {
  flex: 2.5;
  position: relative;
}
.content-wrapper {
  /* flex: 1; */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-right: 20px;
  background-color: #f8f8ff;
  border: #d3d3d3 solid 1px;
  border-radius: 4px;
  height: 260px;
  position: relative;
  top: 0px;
  padding: 10px 10px;
}
.features {
  flex: 1;
  position: relative;

  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-bottom: 5px;
}
.features h3,
.features p {
  color: #2e2e2e;
}
/* .features h5 {
  font-weight: 550;
  font-size: 16px;
} */

.feature {
  position: relative;
  flex: 1;
  align-items: center;
  justify-items: center;
  height: 110px;
  width: 90%;
  margin: 0 6px;
  background-color: #f8f8ff;
  display: flex;
  flex-direction: row;
  border: #d3d3d3 solid 1px;
  border-radius: 4px;
  box-shadow: 0px 0px 18px rgba(0, 0, 0, 0.06);
}
.feature:hover {
  cursor: pointer;
}
.features .one:hover i {
  font-size: 56px;
  transition: 0.4s;
}
.feature a {
  display: block;
  width: 100%;
  height: 100%;
  outline: none;
}
.feature i {
  flex: 1;
  font-size: 48px;
  position: absolute;
  left: 20px;
  top: 20px;
  color: rgb(22, 122, 253);
}

.feature h3 {
  flex: 2;
  position: absolute;
  left: 120px;
  top: 25px;
  font-size: 26px;
  font-weight: 600;
}

.feature h5 {
  position: absolute;
  top: 70px;
  left: 110px;
  font-size: 16px;
  color: #2e2e2e;
  font-weight: 500;
}
.contents {
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  position: relative;
  top: 0px;
  width: 100%;
}
.content {
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  height: 110px;
  margin: 0 6px;
  background-color: #f8f8ff;
  display: flex;
  flex-direction: row;
  border: #d3d3d3 solid 1px;
  border-radius: 4px;
  box-shadow: 0px 0px 18px rgba(0, 0, 0, 0.06);
  position: relative;
  color: #2e2e2e;
}
.content:hover {
  cursor: pointer;
}
.content a {
  display: block;
  width: 100%;
  height: 100%;
  outline: none;
}
.content a:link {
  color: black;
}
.content a:visited {
  color: black;
}
.content i {
  flex: 1;
  font-size: 32px;
  position: absolute;
  left: 20px;
  top: 30px;
  color: rgb(22, 122, 253);
  /* color: #098ddf;
  color: #3c763d;
  color: #428bca;
  color: #098ddf; */
}
.content h3 {
  flex: 2;
  position: absolute;
  left: 100px;
  top: 25px;
  font-weight: 500;
}
.content h5 {
  position: absolute;
  left: 120px;
  top: 68px;
  color: #2e2e2e;
  font-size: 14px;
  font-weight: 500;
}
.content-mid {
  display: flex;
  flex-direction: row;
  column-gap: 10px;
  position: relative;
  top: 15px;
  width: 98%;
  align-items: center;
  justify-items: center;
  text-align: center;
  /* vertical-align: middle; */
  /* column-gap: 15px; */
}
.content-mid form {
  flex: 2.5;
  display: flex;
  flex-direction: column;
  position: relative;
  left: 10px;
}
.content-mid form textarea {
  /* flex: 4.2; */
  /* width: 100%; */
  width: 98%;
  height: 140px;
  background-color: #f8f8ff;
  border: #d3d3d3 solid 1px;
  border-radius: 4px;
  /* margin-right: 20px; */
  padding-left: 10px;
  color: #494949;
}
.content-mid form button {
  /* flex: 1; */
  /* width: 90%; */
  width: 98%;
  line-height: 10px;
  /* border: #d3d3d3 solid 1px;
  border-radius: 4px; */
  border: none;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  margin-right: 10px;
  background-color: #0fbcf9;

  background-color: rgb(22, 122, 253);
  opacity: 0.7;
  align-items: center;
  justify-content: center;
  /* background-color: rgb(214, 214, 212); */
  color: #fff;
  /* color: #4d4c4c; */
  padding: 10px 0;
  position: relative;
  top: -30px;
  font-size: 16px;
}
.content-mid form button:hover {
  cursor: pointer;
  opacity: 1;
}
.contentNums {
  flex: 1;
  height: 140px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: #d3d3d3 solid 1px;
  background-color: #f8f8ff;
  border-radius: 4px;
  position: relative;
  top: -15px;
}
.contentNums p {
  margin-bottom: 13px;
  align-items: flex-start;
}
/* .contentNums .p1 {
  position: relative;
  left: -40px;
} */

/* 中间进度条 */
.con {
  width: 700px;
  margin: 30px;
}

.progressBar,
.progress {
  display: inline-block;
  width: 81%;
  height: 10px;
  background-color: rgba(0, 0, 0, 0.4);
  background-color: #cacaca;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  margin-right: 3%;
}

#progressFill,
.progress-bar {
  width: 0%;
  height: 10px;
  position: relative;
  background-color: #0fbcf9;
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  background-size: 3em 3em;
  background-image: linear-gradient(
    -45deg,
    transparent 0em,
    transparent 0.8em,
    #0fbcf9 0.9em,
    #0fbcf9 2.1em,
    transparent 2.1em,
    transparent 2.9em,
    #0fbcf9 3.1em
  );
  -webkit-animation: warning-animation 750ms infinite linear;
  -moz-animation: warning-animation 750ms infinite linear;
  animation: warning-animation 750ms infinite linear;
}

#progressFill:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  background-image: linear-gradient(
    to bottom,
    #0fbcf9,
    rgbA(37, 117, 188, 0.8) 15%,
    transparent 60%,
    #0fbcf9
  );
}

@-moz-keyframes warning-animation {
  0% {
    background-position: 0 0;
  }

  100% {
    background-position: 3em 0;
  }
}

@-webkit-keyframes warning-animation {
  0% {
    background-position: 0 0;
  }

  100% {
    background-position: 3em 0;
  }
}

@-ms-keyframes warning-animation {
  0% {
    background-position: 0 0;
  }

  100% {
    background-position: 3em 0;
  }
}

@-o-keyframes warning-animation {
  0% {
    background-position: 0 0;
  }

  100% {
    background-position: 3em 0;
  }
}

@keyframes warning-animation {
  0% {
    background-position: 0 0;
  }

  100% {
    background-position: 3em 0;
  }
}

.progressText,
#percentage {
  display: inline-block;
  margin-top: -11px;
  vertical-align: middle;
}

.charts {
  /* flex: 1; */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  position: relative;
  top: -10px;
}
.bar-graph {
  flex: 1;
  background-color: #f8f8ff;
  display: flex;
  height: 500px;
  align-items: center;
  justify-content: center;
  position: relative;
  border: #d3d3d3 solid 1px;
  border-radius: 4px;
  box-shadow: 0px 0px 18px rgba(0, 0, 0, 0.06);
  margin: 16px;
  margin-left: 10px;
}
.bar-graph h5 {
  position: absolute;
  top: 20px;
  font-size: 24px;
  font-weight: 500;
  color: #2e2e2e;
}
.curve-graph {
  flex: 1;
  background-color: #f8f8ff;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 500px;
  position: relative;
  border: #d3d3d3 solid 1px;
  border-radius: 4px;
  box-shadow: 0px 0px 18px rgba(0, 0, 0, 0.06);
  margin: 16px;
  margin-left: 10px;
  margin-top: 0;
}
.curve-graph h5 {
  position: absolute;
  top: 20px;
  font-size: 24px;
  font-weight: 500;
  color: #2e2e2e;
}
.body-tail {
  top: 1660px;
}
